﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        //以前，为变量赋值，只能直接指定值。
        let a = 1;
        let b = 2;
        let c = 3;
        //ES6 允许写成下面这样。
        let [a, b, c] = [1, 2, 3];

        let [head, ...tail] = [1, 2, 3, 4];
        head // 1
        tail // [2, 3, 4]
        let [x, y, ...z] = ['a'];
        x // "a"
        y // undefined
        z // []

        //解构不仅可以用于数组，还可以用于对象。
        let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
        foo // "aaa"
        bar // "bbb"
        //对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，
        //变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
        let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
        foo // "aaa"
        bar // "bbb"
        let { baz } = { foo: 'aaa', bar: 'bbb' };
        baz // undefined

        //字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
        const [a, b, c, d, e] = 'hello';
        a // "h"
        b // "e"
        c // "l"
        d // "l"
        e // "o"

        //解构赋值对提取 JSON 对象中的数据，尤其有用。
        let jsonData = {
            id: 42,
            status: "OK",
            data: [867, 5309]
        };
        let { id, status, data: number } = jsonData;
        console.log(id, status, number);
                           // 42, "OK", [867, 5309]
    </script>
</body>
</html>